<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <h1>{{count}}</h1>
    <!-- 普通用法 -->
    <!-- <button v-on:click="add()">+</button>
    <button v-on:click="sub()">-</button> -->
    <!--  
      语法糖用法 " @ "
      因为 v-on 和 v-bind 都是常用指令，所有vue提供对应语法糖写法;
      记录：
      当错误的使用语法糖时出现一个现象 " :click='add' ";
      在绑定属性中的值是方法时 会自动触发方法;
    -->
    <button @click="add()">+</button>
    <button @click="sub()">-</button>
    </br>
    <!-- 绑定其他事件 -->
    <!-- <input type="text" :value="message"> -->
    <button @keyup="upVal()">点我</button>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        count:0,
        message:'芜湖'
      }
    },
    methods:{
      add() {
        if(this.count > 20) {
          alert("你也太大了")
          return
        }
        this.count++;
      },
      sub() {
        if(this.count == 0) {
          alert("不能再小了额")
          return
        }
        this.count--;
      },
      upVal() {
        console.log("wobeichuf");
        this.message += '!' 
      }
    },
    computed:{
 
    }
  })
  </script>
</body>
</html>